<!-- @format -->
<script setup>
	// 处理按键函数
	const onKeyDown = () => {
		console.log('onKeyDown')
	}
	// p标签的点击事件
	const onPClick = () => {
		console.log('onPClick')
	}

	const onDivClick = () => {
		console.log('onDivClick')
	}
</script>

<template>
	<!-- 按键修饰符 -->
	<input
		type="text"
		@keydown.enter="onKeyDown" />

	<!-- 事件修饰符 -->
	<div @click="onDivClick">
		<!-- .prevent: 阻止默认行为 -->
		<a
			href="https://baidu.com"
			@click.prevent
			>百度一下</a
		>
		<!-- .stop: 阻止冒泡，同名事件不会向上级传递 -->
		<p @click.stop="onPClick"></p>

		<!-- 修饰符的链式调用: 表明两个同时阻止 -->
		<a
			href="https://baidu.com"
			@click.stop.prevent
			>百度一下</a
		>
	</div>
</template>

<style scoped>
	div {
		width: 400px;
		height: 200px;
		background: plum;
	}
	div a {
		display: block;
		width: 100px;
		text-decoration: none;
		background: tomato;
		text-align: center;
		color: #fff;
	}
	div p {
		width: 200px;
		height: 100px;
		background: rebeccapurple;
	}
</style>
